<template>
  <div>
    <!-- 查看详情弹框 -->
    <el-dialog
      :title="title + '通道'"
      :visible.sync="ChannelListShow"
      width="60%"
      :before-close="handleCloses"
    >
      <hr class="hr" />
      <!-- <p class="shopList">请输入通道信息</p> -->

      <div v-loading="listLoading" class="froms">
        <el-form :model="formInline" class="demo-form-inline">
          <el-col :span="12">
            <el-form-item label="通道编号" label-width="150px">
              <el-input
                v-model="formInline.channelNo"
                placeholder="请输入通道编号"
              ></el-input> </el-form-item
          ></el-col>
          <!-- <br /> -->
          <!-- <el-form-item label="通道标识" label-width="120px">
            <el-input v-model="formInline.channelIdentification" placeholder="请输入通道标识"></el-input>
          </el-form-item>
          <span class="el_span">(选)</span>
          <br>-->
          <el-col :span="12">
            <el-form-item label="通道名称" label-width="150px">
              <el-input
                v-model="formInline.channelName"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <br /> -->
          <el-col :span="12">
            <el-form-item label="通道类型" label-width="150px">
              <el-select
                v-model="formInline.channelType"
                @change="channelTypeData(formInline.channelType)"
                placeholder="请选择"
              >
                <el-option label="代付" value="1"></el-option>
                <el-option label="支付" value="2"></el-option>
                <el-option label="代付加支付" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <br /> -->
          <!-- v-if="
                (formInline.channelType && formInline.channelType == '1') ||
                  formInline.channelType == '3'
              " -->
          <el-col :span="12">
            <el-form-item
              label="d0交易费率"
              label-width="150px"
              
            >
              <el-input
                v-model="formInline.d0TradeRate"
                placeholder
              ></el-input>
            </el-form-item>
            <!-- v-if="
                (formInline.channelType && formInline.channelType == '1') ||
                  formInline.channelType == '3'
              " -->
            <span
              
              >%</span
            >
          </el-col>
          <!-- <br /> -->
          <!-- v-if="
                (formInline.channelType && formInline.channelType == '1') ||
                  formInline.channelType == '3'
              " -->
          <el-col :span="12">
            <el-form-item
              label="d0手续费"
              label-width="150px"
              
            >
              <el-input v-model="formInline.d0DrawFee" placeholder></el-input>
            </el-form-item>
            <!-- v-if="
                (formInline.channelType && formInline.channelType == '1') ||
                  formInline.channelType == '3'
              " -->
            <span
              
              >元/笔</span
            >
          </el-col>
          <!-- <br /> -->
          <!-- v-if="
                (formInline.channelType && formInline.channelType == '2') ||
                  formInline.channelType == '3'
              " -->
          <el-col :span="12">
            <el-form-item
              label="支付交易费率"
              label-width="150px"
              
            >
              <el-input v-model="formInline.payCharge" placeholder></el-input>
            </el-form-item>
            <span
              v-if="
                (formInline.channelType && formInline.channelType == '2') ||
                  formInline.channelType == '3'
              "
              >%</span
            >
          </el-col>
          <!-- <br /> -->
                        <!-- v-if="
                (formInline.channelType && formInline.channelType == '2') ||
                  formInline.channelType == '3'
              " -->
          <el-col :span="12">
            <el-form-item
              label="支付手续费"
              label-width="150px"

            >
              <el-input
                v-model="formInline.payBehalfCharge"
                placeholder
              ></el-input>
            </el-form-item>
            <!-- v-if="
                (formInline.channelType && formInline.channelType == '2') ||
                  formInline.channelType == '3'
              " -->
            <span
              
              >元/笔</span
            >
          </el-col>
          <!-- <br /> -->
          <el-col :span="12">
            <el-form-item label="单笔最低限额" label-width="150px">
              <el-input
                v-model="formInline.singleLowest"
                placeholder
              ></el-input>
            </el-form-item>
            <span>元</span>
          </el-col>
          <!-- <br /> -->
          <el-col :span="12">
            <el-form-item label="单笔最高限额" label-width="150px">
              <el-input v-model="formInline.singleLimit" placeholder></el-input>
            </el-form-item>
            <span>元</span>
          </el-col>
          <!-- <br /> -->
          <el-col :span="12">
            <el-form-item label="日交易限额" label-width="150px">
              <el-input v-model="formInline.dayLimit" placeholder></el-input>
            </el-form-item>
            <span>元</span>
          </el-col>
          <!-- <br /> -->
          <el-col :span="12">
            <el-form-item label="月交易限额" label-width="150px">
              <el-input v-model="formInline.monthLimit" placeholder></el-input>
            </el-form-item>
            <span>元</span>
          </el-col>
          <!-- <br /> -->
          <el-col :span="12">
            <el-form-item label="日交易笔数限制" label-width="150px">
              <el-input v-model="formInline.cntCtl" placeholder></el-input>
            </el-form-item>
            <span>元</span>
          </el-col>
          <!-- <br /> -->
          <el-form-item class="foot">
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="handleCloses">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import qs from "qs";
import axios from "axios"
export default {
  props: {
    ChannelListShow: {
      type: Boolean,
      default() {
        return false;
      }
    },
    saveChannelUid: {
      type: Number
    },
    set:{
      type:Number
    },
    types: {
      type: Number
    }
  },
  data() {
    return {
      formInline: {
        uid: "",
        channelNo: "",  //通道编号
        channelName: "",  //通道名称
        channelType: "", //通道类型
        d0TradeRate:"", //d0交易费率
        d0DrawFee:"",//d0手续费

        channelIdentification: "", //通道标识
        payCharge: "",//支付交易费率
        payBehalfCharge: "",//支付手续费
        singleLowest:"",//单笔最低限额
        singleLimit:"",//单笔最高限额
        dayLimit:"",//日交易限额
        monthLimit:"",//月交易限额
        cntCtl:"",//日交易笔数限额
        busCode:"",//支付业务编码
        beginTime:"",//商户交易开始时间
        endTime:"",//商户交易停止时间
        tradeStatus:"",//交易状态
        status:"",//业务状态  0开通   1关闭
        page: 1,
        number: 20,
        // commissionCharge: "", //代付手续费最高比例
        // maximumAmount: "", //代付手续费最高金额
        // name: "" //暂时先放这个，联调接口时再换
      },
      totalNum: 0, //总页数
      tableData: [],
      listLoading: false,
      title: ""
    };
  },
  watch: {
    ChannelListShow(n) {
      if (n == true) {
        this.title = this.types == 1 ? "创建" : "编辑";
        this.types == 2 && this.queryProductInfo();
      }
    }
  },
  created(){
    // alert("页面打开")
  },
  mounted() {
    // alert(this.saveChannelUid)
    // console.log(555, this.eventShow)
  },
  methods: {
    channelTypeData(type) {
      if (type == 1) this.formInline.payCharge = "";
      if (type == 2) {
        this.formInline.payBehalfCharge = "";
        this.commissionCharge = ""; //代付手续费最高比例
        this.maximumAmount = ""; //代付手续费最高金额
      }
      if (type == 3) {
        this.formInline.payCharge = "";
        this.formInline.payBehalfCharge = "";
        this.commissionCharge = ""; //代付手续费最高比例
        this.maximumAmount = ""; //代付手续费最高金额
      }
    },
    queryProductInfo() {
      // alert("这里是修改")
      // alert("这里是回显的数据")
      // alert(this.saveChannelUid)
      axios.post("/api/channel/queryUpdateChannel",{id:this.saveChannelUid})
      .then(res=>{
        console.log("下面是回显的是数据")
        console.log(res)
        
        this.formInline.channelNo = res.data.data.channelNo  //通道编号
        this.formInline.channelName = res.data.data.channelName  //通道名称
        this.formInline.channelType = res.data.data.channelType  //通道类型
        this.formInline.d0TradeRate = res.data.onlinePlatformBus.d0TradeRate //d0交易费率
        this.formInline.d0DrawFee = res.data.onlinePlatformBus.d0DrawFee //d0手续费率
        this.formInline.singleLowest = res.data.onlinePlatformBus.singleLowest //单笔最低限额
        this.formInline.singleLimit = res.data.onlinePlatformBus.singleLimit //单笔最高限额
        this.formInline.dayLimit = res.data.onlinePlatformBus.dayLimit //日交易限额
        this.formInline.monthLimit = res.data.onlinePlatformBus.monthLimit//月交易限额
        this.formInline.cntCtl = res.data.onlinePlatformBus.cntCtl//日交易笔数限额

        this.formInline.payBehalfCharge = res.data.data.payBehalfCharge
        this.formInline.payCharge = res.data.data.payCharge

        // this.$emit("updataDate")
      })
      .catch(err=>{
        console.log(err)
      })


      // alert("是这个吗")
      // console.log(
      //   66,
      //   this.saveChannelUid != "" || this.saveChannelUid != undefined
      // );
      // this.listLoading = true;
      // https.queryUpdateChannel({ uid: this.saveChannelUid }).then(res => {
      //   if (res.data.code !== "0000") {
      //     this.$notify({ title: "错误", message: res.data.msg, type: "error" });
      //     this.listLoading = false;
      //     return;
      //   }
      //   this.formInline = res.data.data;
      //   this.listLoading = false;
      // });
    },
    onSubmit() {
      console.log(this.formInline)
      // return
      // this.listLoading = true;
      if(this.set == 1){
        this.formInline.uid = this.saveChannelUid
      }
      
      // alert(this.formInline.uid)
      axios.post("/api/channel/saveChannel",this.formInline)
      .then(res=>{
        alert("成功")
        console.log(res)
        this.$router.go(0)
      })
      .catch(err=>{
        console.log(err)
      })
      // https.saveChannel(this.formInline).then(res => {
      //   if (res.data.code !== "0000") {
      //     this.$notify({ title: "错误", message: res.data.msg, type: "error" });
      //     this.listLoading = false;
      //     return;
      //   }
      //   this.formInline = {
      //     uid: "",
      //     channelNo: "",
      //     channelName: "",
      //     channelType: "",
      //     channelIdentification: "",
      //     payCharge: "",
      //     payBehalfCharge: "",
      //     commissionCharge: "",
      //     maximumAmount: "",
      //     page: 1,
      //     number: 10
      //   };
      //   this.$notify({ title: "成功", message: "保存成功", type: "success" });
      //   bus.$emit("ChannelListSuccess", { type: 1, show: false });
      //   this.listLoading = false;
      // });
    },
    handleCloses(done) {
      this.formInline = {
        uid: "",
        channelNo: "",
        channelName: "",
        channelType: "",
        channelIdentification: "",
        payCharge: "",
        payBehalfCharge: "",
        page: 1,
        number: 20
      };
      bus.$emit("ChannelListSuccess", { type: 2, show: false });
    },
    productInfoExport() {
      // window.location.href = this.GLOBAL.httpurl + `/api/active/productInfo/excel/export?${qs.stringify(this.formInline)}`;
    }
  }
};
</script>
<style scoped>
.el_span {
  display: inline-block;
  margin-top: 15px;
}
.foot {
  width: 100%;
  /* margin: 0 auto; */
  /* text-align: center;
   */
   margin-top: 20px;
   margin-left: 65%;
}
.hr {
  margin-top: -30px;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
}
.sousuojg6_10 {
  /* float: left; */
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  background-color: #f6f6f6;
  border-radius: 5px;
}
.shopList {
  width: 100%;
  /* border-bottom: 1px solid #ccc; */
  line-height: 50px;
  font-size: 16px;
  height: 30px;
  margin-bottom: 30px;
}
.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
  display: flex;
}
span {
  line-height: 40px;
}
.froms{
  margin-top: 20px;
  height:400px;
}
/deep/ .el-dialog{
  height: 400px;
}
</style>
